<template>
  <div class="user_right fl ml20">
    <div class="company_basic">
      <p>基本信息</p>
      <div>
        <div>
          <p>会员代码:{{businessData.user_id}}</p>
          <p>公司名称:{{businessData.company_name}}</p>
        </div>
        <div>
          <p>会员类型:渠道商(商铺)</p>
          <p>统一社会信用代码:{{businessData.credit_code}}</p>
        </div>
        <div>
          <p>注册日期:{{businessData.created_at}}</p>
          <!-- <p>法人:向光友</p> -->
        </div>
      </div>
    </div>
    <div class="bank_details">
      <p>银行信息</p>
      <div>
        <div>
          <p>开户网点:{{businessData.company_bank}}</p>
          <p>银行账号:{{businessData.company_account}}</p>
        </div>
      </div>
    </div>
    <el-form
      :model="contact_info"
      :rules="rules"
      ref="contact_info"
      label-width="100px"
      class="information"
    >
      <div class="contact_info">
        <p>联系信息</p>
        <div>
          <div>
            <!-- <div>
              <span>所属地区:</span>
             <el-form-item prop="prairies">
                <el-select class="elselect140" v-model="contact_info.prairies" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
             </el-form-item>
              <el-form-item prop="city">
                <el-select class="elselect140" v-model="contact_info.city" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              </el-form-item>
            </div> -->
            <!-- <div>
              <span>公司网址:</span>
                <el-input class="ipt260" v-model="contact_info.tinyurl" placeholder="请输入公司网址"></el-input>
            </div> -->
          </div>
          <div>
            <div>
              <span>详细地址:</span>
              <el-form-item prop="address">
                <el-input
                class="textarea290"
                type="textarea"
                :rows="4"
                placeholder="请输入详细地址"
                v-model="contact_info.address"
              ></el-input>
              </el-form-item>
            </div>
            <div>
              <span>传真:</span>
              <el-input class="ipt260" v-model="contact_info.facsimile" placeholder="请输入传真"></el-input>
            </div>
          </div>
          <div>
            <div>
              <span>负责人:</span>
              <el-form-item prop="principal">
                <el-input class="ipt260" v-model="contact_info.principal" placeholder="请输入负责人"></el-input>
              </el-form-item>
            </div>
            <div>
              <span>邮箱:</span>
              <el-form-item prop="post_box">
                <el-input class="ipt260" v-model="contact_info.post_box" placeholder="请输入邮箱"></el-input>
              </el-form-item>
            </div>
          </div>
          <div>
            <div>
              <span>联系人电话:</span>
              <el-form-item prop="phone">
                <el-input class="ipt260" v-model="contact_info.phone" placeholder="请输入联系人电话"></el-input>
              </el-form-item>
            </div>
            <div>
              <span>邮编:</span>
              <el-form-item prop="zip_code">
                <el-input class="ipt260" v-model="contact_info.zip_code" placeholder="请输入邮编"></el-input>
              </el-form-item>
            </div>
          </div>
          <div>
            <div>
              <span>公司备注:</span>
              <el-input
                class="textarea644"
                type="textarea"
                :rows="6"
                placeholder="请输入详细地址"
                v-model="contact_info.note"
              ></el-input>
            </div>
          </div>
        </div>
      </div>
    </el-form>
    <div class="btn_save" @click="archival_storage('contact_info')">保存</div>
  </div>
</template>


<script>
import {businessInfo} from '@/api/business';
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      businessData:[],
      contact_info: {
        // prairies: "",
        // city:'',
        address: "",
        // tinyurl: "",
        facsimile: "",
        principal: "",
        post_box: "",
        phone: "",
        zip_code: "",
        note:'',
      },
      rules:{
        // prairies:[{ required: true, message: "请选择省份", trigger: "blur" }],
        // city:[{ required: true, message: "请选择城市", trigger: "blur" }],
        address:[{ required: true, message: "请填写详细地址", trigger: "blur" }],
        principal:[{ required: true, message: "请填写负责人", trigger: "blur" }],
        phone:[{ required: true, message: "请填写电话", trigger: "blur" }],
        post_box:[{ required: true, message: "请填写邮箱", trigger: "blur" }],
        zip_code:[{ required: true, message: "请填写邮编", trigger: "blur" }],
      }
    };
  },
  created() {
    this.getbusinessInfo();
  },
  methods: {
    archival_storage(contact_info){
      this.$refs[contact_info].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    async getbusinessInfo(){
     const res = await businessInfo();
     this.businessData = res;
     this.contact_info.address = res.company_address;
     this.contact_info.phone = res.company_phone;
     this.contact_info.zip_code = res.company_zip;
    }
  },
};
</script>

<style lang="scss">
.user_right {
  padding-bottom: 30px;
}
.company_basic,
.bank_details {
  width: 912px;
  margin: 0 auto;
  margin-top: 25px;
  border-radius: 10px;
  -moz-box-shadow: 0px 0px 7px rgba(51, 51, 51, 0.4);
  -webkit-box-shadow: 0px 0px 7px rgba(51, 51, 51, 0.4);
  box-shadow: 0px 0px 7px rgba(51, 51, 51, 0.4);
  > p {
    font-size: 20px;
    color: #4448f8;
    padding: 24px 0;
    padding-left: 40px;
    border-bottom: 2px dashed #cfcdcd;
  }
  > div {
    margin-top: 25px;
    padding-bottom: 5px;
    > div {
      display: flex;
      margin-bottom: 40px;
      > p {
        flex: 1;
        font-size: 16px;
        color: #666;
        &:nth-child(1) {
          margin-left: 96px;
        }
      }
    }
  }
}
.contact_info {
  width: 912px;
  margin: 0 auto;
  font-size: 16px;
  color: #666;
  margin-top: 25px;
  padding-bottom: 35px;
  border-radius: 10px;
  -moz-box-shadow: 0px 0px 7px rgba(51, 51, 51, 0.4);
  -webkit-box-shadow: 0px 0px 7px rgba(51, 51, 51, 0.4);
  box-shadow: 0px 0px 7px rgba(51, 51, 51, 0.4);
  > p {
    font-size: 20px;
    color: #4448f8;
    padding: 24px 0;
    padding-left: 40px;
    border-bottom: 2px dashed #cfcdcd;
  }
  > div {
    > div {
      display: flex;
      margin-top: 25px;
      &:nth-child(1),&:nth-child(2){
        >div{
          &:nth-child(2){
            >span{
              &::before {
              content: "";
            }
            }
          }
        }
      }
      &:nth-child(5) {
        > div {
          > span {
            &::before {
              content: "";
            }
          }
        }
      }
      > div {
        display: flex;
        align-items: center;
        &:nth-child(1) {
          &:nth-child(1) {
            .el-select {
              margin-right: 10px;
            }
          }
        }
        > span {
          width: 100px;
          text-align: right;
          margin-right: 10px;
          &::before {
            content: "*";
            margin-right: 3px;
            color: red;
            font-size: 18px;
          }
        }
        &:nth-child(1) {
          flex: 8;
          padding-left: 50px;
        }
        &:nth-child(2) {
          flex: 7;
          padding-right: 50px;
        }
      }
    }
  }
}
.elselect140 {
  width: 140px;
  .el-input__inner {
    height: 40px;
  }
}
.ipt260 {
  width: 260px;
  .el-input__inner {
    height: 40px;
  }
}
.textarea290 {
  width: 290px;
}
.textarea644 {
  width: 644px;
}
.btn_save {
  width: 170px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
  background: #4448f8;
  color: #fff;
  font-size: 18px;
  margin: 0 auto;
  cursor: pointer;
  margin-top: 110px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.information{
  .el-form-item__content{
    margin-left: 0!important;
  }
}
</style>